<template>
  <div>
    <el-row style="background: white">
      <el-col :span="24">
        <div class="tbUpDiv">
          <img src="src/public/imgs/3~~~13A7E$84RV~7O3L6@F1.png" class="tbImg">
          <span class="tbUpPost">补卡记录</span>
          <el-button style="margin-left: 900px;margin-top: -40px" type="primary" @click="d.formJobPost = true">补卡申请</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div style="border: 1px solid gainsboro;width: 94%;margin: 0px auto;height: 150px">
          <div style="display: flex;border-bottom:1px solid gainsboro;height: 65px">
            <div style="background: rgb(239,239,239);width: 160px;font-size: 12px;display: flex;align-items: center;"><span style="margin-left: 20px">展示列：</span></div>
            <div>
              <div style="height: 65px;display: flex;align-items: center;">
                <el-checkbox  type="checkbox"  label="部门" size="small" style="margin-left: 30px;color: black"/>
                <el-checkbox  type="checkbox" size="small" label="岗位" style="color: black"/>
              </div>
            </div>
          </div>
          <div style="display: flex;border-bottom:1px solid gainsboro;height: 42px ">
            <div style="background: rgb(239,239,239);width: 160px;font-size: 12px;display: flex;align-items: center;"><span style="margin-left: 20px">时间范围：</span></div>
            <div style="margin-left: 29px;margin-top: 4px">
              <el-radio-group v-model="radio1" size="small" @click="radioFw()">
                <el-radio-button  label="今天"/>
                <el-radio-button label="本周" />
                <el-radio-button label="本月" />
                <el-radio-button label="上个月" />
                <el-radio-button label="本年" />
                <el-radio-button label="指定范围"/>
              </el-radio-group>
              <span style="display:block;width: 200px;height: 30px;margin-left: 340px;margin-top: -28px">
                <el-date-picker
                    v-model="d.zdate"
                    type="date"
                    style="width: 100%"
                    v-if="radio1=='指定范围'"
                />
              </span>
            </div>
          </div>
          <div style="display: flex;height: 40px">
            <div style="background: rgb(239,239,239);width: 160px;font-size: 12px;display: flex;align-items: center;"><span style="margin-left: 20px">查看范围：</span></div>
            <div style="display: flex;align-items: center;margin-left: 29px">
              <el-radio-group v-model="radio2" size="small" class="elradiog">
                <el-radio-button label="人员"/>
                <el-radio-button label="我的下属" />
              </el-radio-group>
              <span style="font-size:5px;display: block;width: 200px;margin-left: 30px">
              <el-input
                  v-model="input2"
                  class="w-50 m-2"
                  :suffix-icon="Search"
              />
            </span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table :data="tableData" style="width: 94%;margin-left: 37px">
          <el-table-column prop="name" label="姓名" width="100" />
          <el-table-column prop="sex" label="部门" width="100" />
          <el-table-column prop="address" label="岗位" width="100" />
          <el-table-column prop="where" label="补卡日期" width="120" />
          <el-table-column prop="steta" label="补卡凭据" width="120" />
          <el-table-column prop="steta2" label="补卡类型" width="120" />
          <el-table-column prop="steta2" label="补卡状态" width="120" />
          <el-table-column prop="steta1" label="流程编号" width="120" />
        </el-table>
      </el-col>
    </el-row>
    <el-row >
      <el-col>
        <el-pagination
            v-model:currentPage="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[5,10, 20, 30, 40]"
            small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="sizeChange"
            @current-change="currentChange"
            style="margin-left: 35px"
        />
      </el-col>
    </el-row>
    <el-dialog v-model="d.formJobPost" title="补卡申请单" style="text-align: center">
      <el-form :model="form" label-width="120px" ref="ReplacForm">
        <el-form-item label="员工姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="补卡类型">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="上班卡" value="上班卡" />
            <el-option label="下班卡" value="下班卡" />
          </el-select>
        </el-form-item>
        <el-form-item label="补卡时间">
          <el-col :span="11">
            <el-date-picker
                v-model="form.date1"
                type="date"
                style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="补卡凭据">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="clearForm(ReplacForm)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script lang="ts" setup>
import {reactive, ref, toRefs} from "vue";
import {ElMessage, FormInstance} from "element-plus";

const  d=reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData:[],
  //指定日期
  zdate:'',
  formJobPost:false,
})

//单选按钮
const radio1 = ref()
const radio2 = ref()
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
//定义表单组件
const ReplacForm = ref<FormInstance>();
//提交表单
const onSubmit = () => {
  ElMessage({
    message: '提交成功',
    type: 'success',
  })
  d.formJobPost = false;
}
//清空表单
const clearForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  form.name='',
      form.region='',
      form. date1='',
      form.date2='',
      form.delivery=false,
      form.type=[],
      form.resource='',
      form.desc='',
      d.formJobPost = false;

}
const input2 = ref('');
const {tableData,total,pageNo,pageSize,zdate} = toRefs(d);
</script>

<style scoped>
.tbUpDiv{
  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  position: relative;
}
.tbImg{
  margin-left: 30px;
  margin-top: 15px;
}
.tbUpPost{
  position: relative;
  top: -19px;
  left: 20px;
}


</style>